<template>
	<view class="wrap">
		<view>
			<u-navbar back-text=""  :is-back="true" title="往约到家" :background="background" title-size="18rpx"  title-color='#FFF' back-icon-color='#FFF'></u-navbar>
		</view>
			<view>
				<u-image width="100%" height="600rpx" :src="img"></u-image>
			</view>
			<view class="u_box">
				<text class="username">蓼蓝馨</text>
				<text class="level">高级按摩师</text>
			</view>
			
			<view class="info_box">
				<text class="one_me">个人介绍</text>
				<view class="u-content">
						<u-parse :html="content"></u-parse>
				</view>
			</view>
			
			<view class="products">
				<view class="offer">
					<text style="display: inline-block;">提供服务</text>
				</view>
				<view style="" class="">

					<view class="u-flex-col u-col-center" style="margin-top: -15rpx;border-bottom: 1rpx solid #C0C4CC;" >
						<view class="yue_li u-flex u-margin-top-20">
							<view class="yue_li_left u-flex u-row-center u-col-center">
								<view class="u-font-30 u-font-bold u-color-balck6">
									<image :src="img" class="yunimg" style="width: 150rpx;height: 150rpx;border-radius: 30rpx;"></image>
								</view><!--{{item.yuyue_time}}-->
							</view>
							
							<view class="yue_li_right u-flex-col" style="">
								<view class="top_title" style="">
									<text class="u-font-bold u-font-28 u-color-balck3 z_titles" style="display: inline-block;">皇家足疗</text>
									
								</view>
								
								<text class="u-font-28 u-color-balck6" style="margin-top: 10rpx;margin-bottom: 10rpx;font-size: 28rpx;">219元/次 70分钟</text>
							
								<text class="u-font-22 u-color-balck6 u-type-success"></text><!--{{item.starx}}-->
							</view>
							<view class="yue_li_rr">
								<u-button class="yy" type="success" shape="square" size="medium" style="float:right;" @click='goOrder(1)'>预约</u-button>
							
							</view>
						</view>
					
					
					
					
					
					
					</view>
					
					
				</view>
				<!-- 评论 -->
				
				<view style="padding-bottom: 150rpx;">
					<u-cell-group title="大家评价(100)" style="background-color: #FFFFFF;margin-top: 15rpx;">
						<view style="margin-top: 10rpx;">
		
							<u-cell-item  title="布鲁斯"  :arrow="false"  value="2021-06-25 匿名评价"  style="">
							</u-cell-item>
							<u-cell-item  title="非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意"  :arrow="false"  value=""  style="">
							
							</u-cell-item>
						</view>
						
						<view style="margin-top: 10rpx;">
								
							<u-cell-item  title="布鲁斯"  :arrow="false"  value="2021-06-25 匿名评价"  style="">
							</u-cell-item>
							<u-cell-item  title="非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意非常满意"  :arrow="false"  value=""  style="">
							
							</u-cell-item>
						</view>
						
					</u-cell-group>
					
				</view>
				<!--  -->
				
				<!-- 总计 -->
				<view  class="total">
					<view class="heji" type="">
						<u-icon name="chat"></u-icon>
						客服</view>
					<button class="order" type="">
						<u-icon name="heart"></u-icon>收藏</button>
				</view>
			</view>
			
	</view>
</template>
<script>
	export default {
		data() {
			return {
				b:true,
				img:'/static/uview/example/massage.jpg',
				background:{
					backgroundColor: '#19BE6B',
					backgroundSize: 'cover',
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
					
				},
				content: `<p>服务态度好，亲和力强，欢迎下单体验服务态度好，亲和力强，欢迎下单体验服务态度好，亲和力强，欢迎下单体验服务态度好，亲和力强，欢迎下单体验!</p>`
			}
		},
		methods:{
			goOrder(id){
				this.$u.route({
					url: '/pages/order/index',
					params: {
						id: id,
					}
				})
			}
		}
	}
</script>
<style>
	.total{
		display: inline-block;
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		
	}
	.heji{
		width: 50%;
		display: inline-block;
		border: none!important;
		color: #FFFFFF;
		background-color: #19BE6B;
		height: 100rpx;
		line-height: 80rpx;
		text-align: center;
		z-index: 2000;
		border-top: 1rpx solid #C0C4CC;
		margin-top:62rpx;
		
	}
	.order{
		width: 50%;
		display: inline-block;
		background-color: #FF0000!important;
		color:#FFFFFF!important;
		position: fixed;
		bottom: 0;
		float: right;
		opacity: 1;
		z-index: 10000;
		border-radius: 0rpx !important;
	}
	.btu{
		position: absolute;
		top: -150rpx;
		right:-50rpx;
		width: 130rpx;
		background-color: #19BE6B;
		color: #FFFFFF;
		height: 60rpx;
		line-height: 60rpx;
		/* padding: 5rpx; */
	}
	.pro{
		width: 100%;
		background-color: #FFFFFF;
		
		
	}
	.pro_list{
		padding-top: 20rpx;
		background-color:#FFFFFF;
		padding-left: 30rpx;
	}
	.lists{
		width: 100%;
		background-color: #FFFFFF;
		display: inline-block;
		position: relative;
		border-bottom: 1px solid #C0C4CC;
		margin-bottom: 15rpx;
	}
	.list_img{
		width: 100%;
		display: inline-block;
		border-radius: 30rpx;
	}
	.offer{
		height: 100rpx;
		line-height:120rpx;
		background-color: #FFFFFF;
		margin-top:15rpx;
		font-size: 30rpx;
		padding-left: 30rpx;
	}
	.info_box{
		width: 100%;
		height: auto;
		margin-top:15rpx;
		background-color: #FFFFFF;
		padding: 15rpx;
		margin-bottom: 15rpx;
	}
	.one_me{
		height: 30rpx;
		font-size: 35rpx;
		margin-left: 20rpx;
	}
	.u-content{
		margin-left: 30rpx;
		margin-top: 15rpx;
		text-indent: 40rpx;
		font-size: 30rpx;
	}
	.u_box{
		height: 120rpx;
		line-height:120rpx;
		background-color: #FFFFFF;
	}
	.username{
		margin-left: 30rpx;
		font-size: 40rpx;
	}
	.level{
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	.s_title{
		
		display:inline-block;
		
	}
	.yue_li{
		width: 98%;
		
		background-color: #FFFFFF;
		
		padding-left:8rpx;
		height: 240rpx;
		
	}
	.left_xian{
		width: 10rpx;
		height: 170rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: #18B566;
	}
	.yue_li_left{
		width: 80rpx;
		margin-left: 45rpx;
		border-radius: 15rpx;
	}
	.yue_li_right{	
		margin-left:46rpx;
		position: relative;
		left: 10rpx; 
		top:-30rpx;
		padding: 0!important;
	}
	.yue_li_rr{
		width: 80rpx;
		position: relative;
		top:-30rpx;
		left:30%;
	}
	.yy{
		background-color:#19BE6B;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		padding: 0 15rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		z-index: 100;
		position: relative;
		
	}
	 .uni-lastmsg {
	     width: 100%;
	     color: #8b8b8b;
	     display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	     overflow: hidden;
	     word-break: break-all; 
	     text-overflow: ellipsis;  /* 超出部分省略号 */
	     -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	     -webkit-line-clamp: 2; /** 显示的行数 **/
	    
	}	
	.yy_status{
		width: 150rpx;height: 40rpx;border-radius: 150rpx;line-height: 40rpx;font-size: 24rpx;background: #18B566;color: #FFFFFF;
	}
	.in_title{
		margin-top:16rpx;
	}
	.in_ui{
		margin-left: 5rpx;font-size: 22rpx;display: inline-block;
	}
	
	.u_margin_top{
		margin-top: 10rpx;
		padding-bottom: 7rpx;
	}
	
</style>